<template>
  <div class="container">
    <van-list class="list" v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <ul>
        <li v-for="movie in movieList" :key="movie.movieId" class="list-item">
          <div class="movie">
            <img :src="movie.img" :alt="movie.nm" class="movie-thumb" />
            <div class="movie-info">
              <div class="title">
                <h3>{{ movie.nm }}</h3>
                <span></span>
              </div>
              <div class="rank">
                <!-- 观众评<span>{{ movie.sc }}</span> -->
              </div>
              <div class="actors">{{ movie.star }}</div>
              <div class="arrangement">{{ movie.showInfo }}</div>
            </div>
          </div>
          <van-button class="buy" color=" #F03D37" block round size="small" v-if="movie.showStateButton"
            :text="movie.showStateButton.content"></van-button>
        </li>
      </ul>
    </van-list>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, watch } from 'vue'
import { fetchHotMovies, fetchMoreHotMovies } from '@/api/index.js'
import { useStore } from '@/stores/index.js'

const store = useStore()

const loading = ref(false)
const finished = ref(false)

const movieList = computed(() => store.movieList) //全部热映电影列表
const movieIds = computed(() => store.movieIds) //全部热映电影id列表
const total = computed(() => store.total) //全部热映电影总数

const remainingMovieIds = computed(() => {
  //剩余的热映电影id列表
  return movieIds.value.slice(movieList.value.length)
})

watch(
  () => store.currentCity.id,
  async (newId) => {
    // console.log('城市变了:', newId)
    // 重置状态
    loading.value = true
    finished.value = false
    const res = await fetchHotMovies(newId)
    // 更新 store 中的数据
    store.setMovieList(res.movieList)
    store.setMovieIds(res.movieIds)
    store.setTotal(res.total)
    loading.value = false
    if (movieList.value.length >= total.value) {
      finished.value = true
    }
  },
  { deep: true, immediate: true },
)

// 监听 movieList 的变化，判断是否已经加载完毕
watch(
  () => store.movieList,
  (newList) => {
    if (newList.length >= total.value) {
      finished.value = true
    }
  },
  { immediate: true, deep: true },
)

onMounted(async () => {
  if (!movieList.value || movieList.value.length === 0) {
    loading.value = true
    const res = await fetchHotMovies(store.currentCity.id)
    // 更新 store 中的数据
    store.setMovieList(res.movieList)
    store.setMovieIds(res.movieIds)
    store.setTotal(res.total)
    loading.value = false
  }
  if (movieList.value.length >= total.value) {
    finished.value = true
  }
})

const onLoad = async () => {
  if (movieList.value.length < total.value) {
    loading.value = true
    const res = await fetchMoreHotMovies(remainingMovieIds.value.splice(0, 10).join(','))
    store.setMovieList([...movieList.value, ...res.coming])
    loading.value = false
  }

  if (movieList.value.length >= total.value) {
    finished.value = true
  }
}
</script>

<style scoped>
.container {
  overflow-y: scroll;
  height: 100%;
}

.list {
  background-color: #fff;
  margin-top: 10px;
}

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.movie {
  display: flex;
  align-items: center;
  justify-content: center;
}

.movie-thumb {
  width: 64px;
  height: 90px;
  margin-right: 10px;
}

.movie-info {
  width: 200px;
  font-size: 13px;
  color: #777;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  white-space: nowrap;
  align-items: flex-start;
  justify-content: center;
  text-overflow: ellipsis;
}

.movie-info .title {
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.movie-info .title h3 {
  font-size: 17px;
  color: #333;
  margin: 0 0 5px 0;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
}

.movie-info .actors,
.movie-info .arrangement {
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.buy {
  font-size: 13px;
  width: 60px;
  height: 32px;
  line-height: 32px;
}
</style>
